import {useState,useEffect} from 'react'
// import {useLocation,useNavigate,Outlet} from 'react-router-dom'
import axios from 'axios'

import { Flex ,Button,Input, Table,Space,Tree,Checkbox, Col, Row} from 'antd';
const { TextArea } = Input;
import type { TableColumnsType } from 'antd';
import type { TreeDataNode, TreeProps } from 'antd';

interface DataType {
    key:string,
    name:string,
    price:number,
    isFast:boolean,
    notes:string,
    diagnosis:string
  }

let main = {
    width:'100%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid orange',
}
let aiptop = {
    width:'100%',
    height:'10%',
    borderRadius: 6,
    // border:'1px solid blue',
    border:'1px solid rgb(247,247,247)',
}
let aipcont= {
    width:'100%',
    height:'80%',
    // borderRadius: 6,
    border:'1px solid rgb(247,247,247)',
}
let aipbott= {
    width:'100%',
    height:'10%',
    // borderRadius: 6,
    border:'1px solid rgb(247,247,247)',
}
let aipco1 = {
    width:'20%',
    height:'100%',
    // borderRadius: 6,
    border:'1px solid rgb(247,247,247)',
}
let aipco1tp = {
    width:'100%',
    height:'5%',
    // borderRadius: 6,
    border:'1px solid rgb(247,247,247)',
}                      
let aipco2 = {
    width:'50%',
    height:'100%',
    // borderRadius: 6,
    border:'1px solid rgb(247,247,247)',
}
let aipco2co = {
    width:'100%',
    height:'45%',
    // borderRadius: 6,
    border:'1px solid rgb(247,247,247)',
} 
let aipco2bb = {
    width:'100%',
    height:'45%',
    // borderRadius: 6,
    border:'1px solid rgb(247,247,247)',
}   
let aipco3 = {
    width:'30%',
    height:'100%',
    // borderRadius: 6,
    border:'1px solid rgb(247,247,247)',
}
let aipco3co = {
    width:'100%',
    height:'95%',
    // borderRadius: 6,
    border:'1px solid rgb(247,247,247)',
}
let aipco3coli = {
    width:'90%',
    height:'20%',
    borderRadius: 6,
    // border:'1px solid blue',
}
let ai3ipt = {
    width:'250px'
}
let prefrlf = {
    width:'30%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid red',
}
let prefrhg = {
    width:'20%',
    height:'100%',
    borderRadius: 6,
    // border:'1px solid red',
}

export default function Addinspect(){
    let btn = (code:any)=>{
        alert(code)
    }
    const data: DataType[] = [
        {
            key:'0',
            name:'aaa',
            price:100,
            isFast:false,
            notes:'',
            diagnosis:''
        },
        {
            key:'1',
            name:'aaa1',
            price:100,
            isFast:false,
            notes:'',
            diagnosis:''
        },
        {
            key:'2',
            name:'aaa2',
            price:100,
            isFast:false,
            notes:'',
            diagnosis:''
        },
        
      ];
    const columns: TableColumnsType<DataType> = [
            {
              title: '序号',
              dataIndex: 'key',
            },
            {
                title: '项目名称',
                dataIndex: 'name',
                width:'100px'
            },
            {
              title: '金额',
              dataIndex:'price',
            },
            {
                title: '加急',
                dataIndex:'isFast',
            },
            {
              title: '备注',
              dataIndex:'notes',
            },
            {
                title: '操作',
                render: (_, record) => (
                    <Space size="middle">
                      <a onClick={() => btn(record.key)}>删除</a>
                    </Space>
                ),
            },
          ];

    let [list,setlist] = useState([])
    let [index,setindex] = useState([])
    let getdata = async()=>{
        let {data:{lis}} = await axios.get('http://127.0.0.1:3000/why/sindex')
        setlist(lis)
    }
    let getshow = async(selectedKeys:any, e:{selected: boolean, selectedNodes:any, node:any, event:any})=>{
        // console.log(selectedKeys)
        // console.log(e.selectedNodes)
        // console.log(e.event)
        console.log(e.node)
        let {data:{lis}} = await axios.post('http://127.0.0.1:3000/why/getmachines',{id:e.node.id})
        setindex(lis)
        console.log(lis)
    }

    useEffect(()=>{
        getdata()
    },[])

    return (
        <>
            <Flex wrap justify='space-around' align='center' style={main}>
                <Flex justify='space-around' align='center' style={aiptop}>
                    新增检查申请表
                </Flex>
                <Flex justify='space-around' align='center' style={aipcont}>
                    <Flex wrap vertical justify='flex-start' align='space-between' style={aipco1}>
                        <Flex justify='space-around' align='center' style={aipco1tp}>
                            申请单列表
                        </Flex>
                        <Tree
                            defaultExpandAll={true}
                            treeData={list}
                            onSelect={getshow}
                        />
                    </Flex>
                    <Flex wrap justify='space-around' align='center' style={aipco2}>
                        <Flex justify='space-around' align='center' style={aipco1tp}>
                            项目列表
                        </Flex>
                        <Flex justify='space-around' align='center' style={aipco2co}>
                            <Row>
                                {
                                    index.map((item:any,index)=>(
                                        <Col span={10}>
                                            <Checkbox value={item.name}>{item.name}</Checkbox>
                                        </Col>
                                    ))
                                }
                            </Row>
                        </Flex>
                        <Flex justify='space-around' align='center' style={aipco1tp}>
                            已选项目
                        </Flex>
                        <Flex justify='space-around' align='center' style={aipco2bb}>
                            <Table<DataType> scroll={{ y:150}}  columns={columns} dataSource={data} pagination={false} size="middle" />
                        </Flex>
                    </Flex>
                    <Flex wrap justify='space-around' align='center' style={aipco3}>
                        <Flex justify='space-around' align='center' style={aipco1tp}>
                            申请单内容
                        </Flex>
                        <Flex wrap vertical justify='flex-start' align='center' style={aipco3co}>
                            <Flex justify='space-between' align='center' style={aipco3coli}>
                                主述：<TextArea rows={3} cols={4} style={ai3ipt}></TextArea>
                            </Flex>
                            <Flex justify='space-between' align='center' style={aipco3coli}>
                                体征：<TextArea rows={3} cols={4} style={ai3ipt}></TextArea>
                            </Flex>
                            <Flex justify='space-between' align='center' style={aipco3coli}>
                                诊断：<Input style={ai3ipt}></Input>
                            </Flex>
                        </Flex>
                    </Flex>
                </Flex>
                <Flex justify='space-around' align='center' style={aipbott}>
                    <Flex justify='space-between' align='center' style={prefrlf}>
                            处方金额合计：￥{100}
                    </Flex>
                    <Flex justify='space-around' align='center' style={prefrhg}>
                        <Button size='small' >重置检查列表</Button>
                        <Button size='small' type="primary">保存</Button>
                    </Flex>
                </Flex>
            </Flex>
            

        </>
    )
}